<template>
	<div class="homePage">
		<!-- 轮播图 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
				<swiper-item v-for="item in carouselList" :key="item.id">
					<view class="swiper-item" @click="goDetail('轮播图详情', item.id)">
						<img :src="item.imageUrl" alt="" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 公告 -->
		<div class="notice">
			<div class="left">
				<div class="iconfont icon-gonggao" @click="goAnnounce"></div>
			</div>
			<div class="right">
				<swiper circular :autoplay="true" :interval="3000" :duration="500" class="swiper">
					<swiper-item v-for="item in noticeList" :key="item.id" class="swiper-item">
						<view class="noticeContent" @click="goDetail('详情', item.id)">
							{{ item.title }}
						</view>
					</swiper-item>
				</swiper>
			</div>
		</div>
		<!-- 方案 -->
		<div class="solution">
			<scroll-view lower-threshold="50" :scroll-top="scrollTop" scroll-y="true" @scrolltolower="lower" class="scroll-view">
				<showItem v-for="item in solutionList" :key="item.id" :solution="item" @setFavorite="setFavorite"></showItem>
				<div class="noData" v-if="solutionList.length === total">没有数据了</div>
			</scroll-view>
		</div>
	</div>
</template>
<script>
import { getCarouselList } from '@/api/carousel/carousel.js';
import { getAnnouncementsList } from '@/api/announcements/announcements.js';
import { getHomeSolutionList } from '@/api/solutions/solutions.js';

import store from '../store';
export default {
	data() {
		return {
			scrollTop: 0,
			carouselList: [],
			noticeList: [],
			solutionList: [],
			timer: null,
			pageNum: 1,
			total: 0
		};
	},
	created() {
		this.getCarouselList();
		this.getNoticeList();
		this.getSolutionList();
	},
	methods: {
		async getCarouselList() {
			const { rows } = await getCarouselList(1, 10);
			this.carouselList = rows;
		},
		async getNoticeList() {
			const { rows } = await getAnnouncementsList(1, 10);
			this.noticeList = rows;
		},
		async getSolutionList() {
			const { rows, total } = await getHomeSolutionList({
				pageNum: this.pageNum,
				pageSize: 10
			});
			this.solutionList = this.solutionList.concat(rows);
			this.total = total;
		},
		lower: function (e) {
			if (this.timer != null || this.total <= this.solutionList.length) return;
			this.timer = setTimeout(() => {
				this.pageNum += 1;
				this.getSolutionList();
				clearTimeout(this.timer);
				this.timer = null;
			}, 500);
		},
		setFavorite(favorite, solutionid) {
			this.solutionList.forEach((item) => {
				if (item.id === solutionid) {
					item.favorite = favorite;
				}
			});
		},
		goDetail(title, id) {
			uni.navigateTo({
				url: `/pages/common/detail/index?id=${id}&title=${title}`
			});
		},
		goAnnounce() {
			uni.navigateTo({
				url: '/pages/announcement/index'
			});
		}
	}
};
</script>

<style lang="less" scoped>
.homePage {
	height: 100vh;
	.uni-margin-wrap {
		z-index: 999;
		position: fixed;
		width: 350rpx;
		width: 100%;
		.swiper {
			height: 300rpx;
			.swiper-item {
				display: block;
				height: 300rpx;
				line-height: 300rpx;
				text-align: center;
				img {
					width: 100%; /* 让图片宽度与容器宽度一致 */
					height: 100%; /* 让图片高度与容器高度一致 */
					object-fit: cover; /* 这将裁剪图片以覆盖整个容器，同时保持图片的宽高比 */
				}
			}
		}
	}
	.notice {
		z-index: 999;
		position: fixed;
		display: flex;
		padding: 0 10rpx;
		top: 300rpx;
		height: 70rpx;
		width: 100%;

		.left {
			height: 70rpx;
			width: 70rpx;

			.iconfont {
				font-size: 60rpx;
				line-height: 70rpx;
			}
		}
		.right {
			height: 70rpx;
			padding-left: 10rpx;
			flex: 1;
			.swiper {
				height: 70rpx;
				.swiper-item {
					height: 100%;
				}
			}
			.noticeContent {
				white-space: nowrap;
				line-height: 70rpx;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
	.solution {
		position: fixed;
		top: 380rpx;
		margin-bottom: 10rpx;
		height: calc(100vh - 400rpx);
		width: 100%;
		.scroll-view {
			height: 100%;
		}
		.noData {
			margin: 20rpx;
			text-align: center;
			font-size: 40rpx;
			color: #0a4d68;
		}
	}
}
</style>
